<!-- 首页 -->
<template>
	<zh-app style="background-color: white;font-family: '阿里巴巴普惠体'">
		<!-- 导航栏 -->
		<zh-navbar title="东阳新生报名" color="#85a5ff" linear="right" :hideHome="true"/>
		<!-- 轮播图 -->
		<zh-carousel autoplay :margin="[10,16]" :width="700" :height="300" :round="3" dotPosition="bottom" align="right" :list="data.bannerList" v-if="data.bannerList && data.bannerList.length" />
		<!-- 滚动通知条 -->
		<zh-roll-notice :margin="[20,10]" :shadow="1" :followTheme="true" :round="3" :list="data.noticeList"></zh-roll-notice>
		<!-- 应用宫格列表 -->
		<view class="title pt-20">入学服务</view>
		<zh-grid :col="4" :margin="[20, 0]" color="#FFFFFF">
			<zh-grid-item :linkItem="item" v-for="item in data.servicesArr" :key="item.appId">
				<tm-icon :name="item.icon||item.iconImgUrl" :font-size="54" :color="item.color" _class="pb-10"></tm-icon>
				<zh-text _class="text-weight-b" parentClass="text-align-center" :font-size="28" :label="item.title"></zh-text>
			</zh-grid-item>
		</zh-grid>
		<!-- 应用块状列表 -->
		<view class="title">我要关注</view>
		<view class="box flex-justified">
			<view class="left flex-vertical">
				<view class="left-box" @tap="gotoPage('/pages/edu/enrollPlan/planList')">
					<view class="box shadow flex-center" style="background-image: linear-gradient(to right, #d6e4ff, #85a5ff)">
						<zh-text :font-size="33" color="#ffffff" _class="font-weight-b" label="招生方案" style="font-weight:600"></zh-text>
					</view>
				</view>
				<view class="left-box flex-justified">
					<view class="left-box-item" @tap="gotoPage('/pages/edu/enroll/special')">
						<view class="box shadow flex-center" style="background-image: linear-gradient(to right, #d6e4ff, #adc6ff)">
							<zh-text :font-size="33" color="#FFFFFF" _class="font-weight-b" label="特殊通道" style="font-weight:600"></zh-text>
						</view>
					</view>
					<view class="left-box-item" @tap="gotoPage('/pages/edu/newStuRegister/newStuRegister')">
						<view class="box shadow flex-center" style="background-image: linear-gradient(to right, #adc6ff, #85a5ff)">
							<zh-text :font-size="33" color="#FFFFFF" _class="font-weight-b" label="准新生登记" style="font-weight:600"></zh-text>
						</view>
					</view>
				</view>
			</view>
			<view class="right" @tap="gotoPage('/pages/edu/enroll/stageSelect')">
				<view class="box-col shadow flex-center">
					<zh-text :font-size="33" color="#FFFFFF" _class="font-weight-b" label="我要报名" style="font-weight:600"></zh-text>
				</view>
			</view>
		</view>
		<!-- 说明 -->
		<zlb-footer></zlb-footer>
	</zh-app>
</template>
<script lang="ts" setup name="home">
	import {ref,reactive,onMounted} from "vue";
	import systemConfig from '@/common/config';
	import { onLoad } from "@dcloudio/uni-app";
	import { user,system } from '@/store';
	import * as commonUtil from '@/common/utils/util'
	// ------------------接收传入参数(组件)-------------------

	// ------------------钩子函数----------------------------
	// 初始化
	onLoad(async () => {
		const token = user.accesstoken;
		if(!token){
			return
		}
		getEntranceArr();
		getBannerList();
		getNoticeList();
	});
	
	// ------------------变量区------------------------------

	// 主数据
	const data = reactive({
		// 轮播图
		bannerList: [] as any,
		// 滚动通知
		noticeList: [] as any,
		// 应用列表（入学服务）
		servicesArr: [] as Array<any>
	});
	// ------------------方法区------------------------------
	const getBannerList=()=>{
		//获取轮播图
		let params :any={}
		params.bannerType = 'home';
		$api.common.send.post("banner0007",params).then((res :any)=>{
			data.bannerList=res.result;
		})
	}
	const getNoticeList=()=>{
		//获取系统状态通知
		let params :any={}
		$api.common.send.post("sysNotice0011",params).then((res :any)=>{
			data.noticeList=res.result;
		})
	}
	// 获取应用列表（入学服务）
	const getEntranceArr = () => {
		const params :any = {
			menuPro: 'person',
			menuType: 'common'
		}
		$api.common.send.post("appmenu0007",params).then((res :any) => {
			data.servicesArr = res.result[0].children;
		})
	}
	//跳转页面
	const gotoPage=(path:string)=>{
		$router.push(path,{})
	}
</script>
<style lang="scss" scoped>
	.box {
		width: 670rpx;
		height: 300rpx;
		margin: 20rpx auto;
	}
	.left {
		width: 450rpx;
		height: 300rpx;
	}
	.left-box {
		width: 100%;
		height: 145rpx;
		
		.box {
			width: auto;
			height: 136rpx;
			margin: 0;
			border-radius: 10rpx;
		}
	}
	.left-box-item {
		width: 48%;
		height: 100%;
	}
	.right {
		width: 200rpx;
		height: 300rpx;
		
		.box-col {
			width: auto;
			height: 294rpx;
			margin: 0;
			border-radius: 10rpx;
			background-image: linear-gradient(to right, #85a5ff, #597ef7)
		}
	}
	.text {
		width: 100%;
		font-size: 24rpx;
		color: #9D9D9D;
		text-align: center;
		position: absolute;
		bottom: 20rpx;
	}
	.title {
		margin: 0rpx 0 20rpx 50rpx;
		color: #333333;
		font-size: 38rpx;
		font-weight: 600;
	}
	.flex-justified {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.flex-vertical {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
</style>